<!-- userProfiles -->
<template>
  <div class="home_body">
    <div class="nav">
      <navFronted class="nav-fronted"> </navFronted>
    </div>
    <div class="main">
      <el-menu
        :default-active="activeIndex"
        class="el-menu"
        @select="handleSelect"
      >
        <el-menu-item index="/userProfiles/personalDetails">
          个人信息
        </el-menu-item>
        <el-menu-item index="/userProfiles/loginSecurity">
          登录安全
        </el-menu-item>
        <el-menu-item index="/userProfiles/cooperationApplication" v-if="authority === 'USER'">
          合作申请
        </el-menu-item>
        <el-menu-item index="/userProfiles/cooperationing" v-if="authority === 'USER'">
          申请历史
        </el-menu-item>
        <el-menu-item index="/userProfiles/release" v-if="authority === 'MERCHANT'"
          >发布兼职</el-menu-item
        >
        <el-menu-item index="/userProfiles/myRelease" v-if="authority === 'MERCHANT'"
          >我的发布</el-menu-item
        >
      </el-menu>
      <router-view />
    </div>
  </div>
</template>

<script>
import navFronted from "@/components/navFronted/navFronted";
import { mapGetters } from "vuex";
export default {
  name: "userProfiles",
  components: { navFronted },
  data() {
    return {
      tabPosition: "left",
      activeIndex: "",
    };
  },
  computed: {
    ...mapGetters(["authority"]),
  },
  mounted(){
    this.activeIndex = window.location.hash.substring(1);
  },
  methods: {
    handleSelect(key) {
      this.$router.push(key);
    },
  },
};
</script>

<style lang='scss' scoped>
.nav {
  display: flex;
  width: 100%;
  padding: 0 30px;
  position: fixed;
  top: 0;
  left: 0;
  background: white;
  border-bottom: solid 1px #e6e6e6;
  z-index: 99;
  .nav-fronted {
    width: 100%;
    max-width: 1128px;
    margin: 0 auto;
  }
}
.main {
  width: 100%;
  max-width: 1128px;
  margin: 0 auto;
  display: flex;
  background: white;
  padding: 20px 16px 8px 16px;
  box-shadow: 0 0 0 1px rgb(150 131 131 / 15%), 0 2px 3px rgb(129 121 121 / 20%);
  transition: box-shadow 83ms;
  border-radius: 10px;
  margin-top: 20px;
}
.home_body {
  padding-top: 60px;
  background: rgb(243, 242, 239);
  min-height: 100vh;
}
.el-menu {
  margin-right: 20px;
}
</style>